<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/datatables.min.css" />
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/datatables.min.js"></script>

    <style>
        html,
        body {
            width: 100%
        }

        td,
        th {
            white-space: nowrap;
        }

        table thead tr .txt-center {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }

        .wrap {}

        header {
            text-align: center;
        }

        header p {
            max-width: 1555px;
            text-align: left;
            font-size: 24px;
            margin: auto;
            margin-top: 100px;
        }

        .container {
            display: flex;
            justify-content: center;
        }

        table thead tr .border-right-none {
            border-right: none;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <header>
            <h1>请按照提示，按步骤设置绩效考核标准的标准</h1>

            <p>3. 请按照下面的提示填写绩效考核的标准。</p>
        </header>
        <div class="container">
            <table id="info-table" class="table table-hover table-striped table-bordered" style="width:100px;">
                <thead>
                    <tr>
                        <th rowspan="3" colspan="4">考核区分项</th>
                        <th colspan="12">数据考核项</th>
                    </tr>
                    <tr>
                        <th colspan="3">阅读量/阅读率</th>
                        <th colspan="3">评论数</th>
                        <th colspan="3">转发数</th>
                        <th colspan="3">收藏数</th>
                    </tr>
                    <tr>
                        <th colspan="3">考核区间一</th>
                        <th colspan="3">考核区间二</th>
                        <th colspan="3">考核区间三</th>
                        <th colspan="3">考核区间四</th>
                    </tr>
                    <tr>
                        <th>账号</th>
                        <th>位置</th>
                        <th>文章类型</th>
                        <th>职级</th>
                        <th class="border-right-none">区间</th>
                        <th></th>
                        <th>奖励</th>
                        <th class="border-right-none">区间</th>
                        <th></th>
                        <th>奖励</th>
                        <th class="border-right-none">区间</th>
                        <th></th>
                        <th>奖励</th>
                        <th class="border-right-none">区间</th>
                        <th></th>
                        <th>奖励</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Ashton Cox</td>
                        <td>Junior Technical Author</td>
                        <td>San Francisco</td>
                        <td>66</td>
                        <td>2009/01/12</td>
                        <td>$86,000</td>
                        <td>Cedric Kelly</td>
                        <td>Senior Javascript Developer</td>
                        <td>Edinburgh</td>
                        <td>22</td>
                        <td>2012/03/29</td>
                        <td>2012/03/29</td>
                        <td>$433,060</td>
                        <td>22</td>
                        <td>$433,060</td>
                        <td>$433,060</td>
                    </tr>
                    <tr>
                        <td>Ashton Cox</td>
                        <td>Junior Technical Author</td>
                        <td>San Francisco</td>
                        <td>66</td>
                        <td>2009/01/12</td>
                        <td>$86,000</td>
                        <td>Cedric Kelly</td>
                        <td>Senior Javascript Developer</td>
                        <td>Edinburgh</td>
                        <td>22</td>
                        <td>2012/03/29</td>
                        <td>2012/03/29</td>
                        <td>$433,060</td>
                        <td>22</td>
                        <td>2012/03/29</td>
                        <td>$433,060</td>
                    </tr>
                    <tr>
                        <td>Airi Satou</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <td>33</td>
                        <td>2008/11/28</td>
                        <td>$162,700</td>
                        <td>Brielle Williamson</td>
                        <td>Integration Specialist</td>
                        <td>New York</td>
                        <td>61</td>
                        <td>2012/12/02</td>
                        <td>$372,000</td>
                        <td>61</td>
                        <td>61</td>
                        <td>2012/12/02</td>
                        <td>$372,000</td>
                    </tr>
                    <tr>
                        <td>Herrod Chandler</td>
                        <td>Sales Assistant</td>
                        <td>San Francisco</td>
                        <td>59</td>
                        <td>2012/08/06</td>
                        <td>$137,500</td>
                        <td>Rhona Davidson</td>
                        <td>Integration Specialist</td>
                        <td>Tokyo</td>
                        <td>55</td>
                        <td>2010/10/14</td>
                        <td>$327,900</td>
                        <td>55</td>
                        <td>2010/10/14</td>
                        <td>$327,900</td>
                        <td>$327,900</td>
                    </tr>

                </tbody>
                <!-- <tfoot>
                <tr>
                    <th>合计</th>
                    <th>333</th>
                    <th>233</th>
                    <th>123</th>
                    <th>344</th>
                    <th>222</th>
                    <th>555</th>
                    <th>333</th>
                    <th>233</th>
                    <th>123</th>
                    <th>344</th>
                    <th>222</th>
                    <th>233</th>
                    <th>123</th>
                    <th>344</th>
                    <th>2333</th>
                </tr>
            </tfoot> -->
            </table>
        </div>
        <div class="container">
            <table id="example"></table>
        </div>
    </div>
</body>
<script>
    // $('th').css({"display":"table-cell", "vertical-align":"middle", "text-align":"center", "background-color":"#ccc"})
    $('th').addClass('txt-center')
    // $('tr th:first-child').addClass('bg-primary')
    // $('tr td:first-child').addClass('bg-info')


    $(document).ready(function () {
        // let datas;
        // $.get('data.json', function (res) {
        //     datas = JSON.parse(res)
        //     console.log(datas)
        // })
        // $('#example').dataTable({
        //     data: [{
        //         "name": "Tiger Nixon1",
        //         "position": "System Architect1",
        //         "phone": {
        //             "plain": 5552368,
        //             "filter": "5552368 555-2368",
        //             "display": "555-2368"
        //         },
        //         "salary": "$3,1201",
        //         "start_date": "2011/04/25",
        //         "office": "Edinburgh1",
        //         "extn": "54211"
        //     }, {
        //         "name": "Tiger Nixon3",
        //         "position": "System Architect3",
        //         "phone": {
        //             "plain": 5552368,
        //             "filter": "5552368 555-2368",
        //             "display": "555-2368"
        //         },
        //         "salary": "$3,1203",
        //         "start_date": "2011/04/25",
        //         "office": "Edinburgh3",
        //         "extn": "54213"
        //     }, {
        //         "name": "Tiger Nixon3",
        //         "position": "System Architect3",
        //         "phone": {
        //             "plain": 5552368,
        //             "filter": "5552368 555-2368",
        //             "display": "555-2368"
        //         },
        //         "salary": "$3,1203",
        //         "start_date": "2011/04/25",
        //         "office": "Edinburgh3",
        //         "extn": "54213"
        //     }],
        //     columnDefs: [{
        //         "targets": 0,
        //         "searchable": false
        //     }, {
        //         "targets": [1, 2, 3],
        //         "orderData": [2, 3, 4],
        //         "searchable": false
        //     }, {
        //         "targets": [-3, -4],
        //         "orderable": false,
        //         "searchable": false
        //     }],
        //     columns: [{
        //             "name": "name",
        //             "cellType": "th",
        //             "orderDataType": "dom-text",
        //             "orderSequence": ["desc", "asc", "asc"],
        //             "className": "txt-center",
        //             "contentPadding": "mmm",
        //             "createdCell": function (td,
        //                 cellData, rowData, row, col) {
        //                 if (row < 1) {
        //                     $(td).css('color', 'red');
        //                 }
        //             },
        //             "data": "name",
        //             "searchable": true,
        //             "title": "My Name"
        //         }, {
        //             "data": "position",
        //             "render": function (data, type, full, meta) {
        //                 return '<a href="' + data + '">' + data + '</a>';
        //             },
        //             "title": "title2"
        //         }, {
        //             "data": 'phone',
        //             "render": {
        //                 "_": "plain",
        //                 "filter": "filter",
        //                 "display": "display"
        //             }
        //         }, {
        //             "data": "office"
        //         }, {
        //             "data": "start_date",
        //             "type": "date"
        //         }, {
        //             "data": "extn",
        //             "visible": false
        //         }, {
        //             "data": "salary",
        //             "width": "20px"
        //         },
        //         {
        //             "data": null,
        //             "orderable": false,
        //             "defaultContent": "Edit"
        //         }
        //     ]
        // });
        
        var columns = [
            {
                "data": "考核区分项",
                "rowspan": "3"
            },
            {
                "data": "数据考核项"
            }
        ]

        var table = $('#info-table').DataTable({
            // scrollY: "400px",
            // scrollX: true,
            scrollCollapse: true,
            // fixedColumns: {
            //     leftColumns: 1
            // },
            sort: false,
            paging: false,
            searching: false,
            destroy: true,
            info: false,
            responsive: true,
            autoFill: true,
            colReorder: true,
            orderCellsTop: true,
            columns: columns,
            headerCallback: function (thead, data, start, end, display) {
                // $(thead).find('th').eq(0).html('Displaying ' + (end - start) + ' records');
               
                // console.log($(thead).html())
            },
            columnDefs: [{
                "targets": [5, 8, 11, 14],
                "createdCell": function (td, cellData, rowData, row, col) {
                   console.log(td)
                   console.log(row)
                   console.log(col)
                //    console.log(rowData)
                }
            }]
        });

        table.cells('thead', function (t, a) {
            // console.log(a)
        })

        $('a.toggle-vis').on('click', function (e) {
            e.preventDefault();

            // Get the column API object
            var column = table.column($(this).attr('data-column'));

            // Toggle the visibility
            column.visible(!column.visible());
        });
    });
    $(document).on('init.dt', function (e, settings) {
        var api = new $.fn.dataTable.Api(settings);
        console.log('New DataTable created:', api.table().node());
    });
</script>

</html>